<template>
  <div class="analysis" v-show="show">
    <h3>答案解析</h3>
    <p class="suc" v-if="analysis.multipleAnswer">
      正确答案:<span
        v-for="(item, index) in analysis.multipleAnswer"
        :key="index"
        >{{ item }}</span
      >
    </p>
    <p class="suc" v-else>正确答案:{{ analysis.singleAnswer }}</p>
    <div class="mess">
      <span
        >难度：{{
          analysis.difficulty === 3
            ? '困难'
              ? analysis.difficulty === 2
              : '普通'
            : '简单'
        }}</span
      >
      <span>提交次数：{{ analysis.submitNum }}</span>
      <span>正确次数：{{ analysis.correctNum }}</span>
    </div>
    <p>{{ analysis.answerAnalysis }}</p>
  </div>
</template>

<script>
export default {
  props: ['analysis'],
  data () {
    return {
      show: false
    }
  },
  created () {}
}
</script>

<style lang="less" scoped>
.analysis {
  width: 90%;
  margin: 0 auto 100px;
  .suc {
    color: #66c779;
  }
  p {
    font-size: 16px;
  }
  .mess {
    display: flex;
    margin-bottom: 20px;
    padding: 0 10px;
    height: 30px;
    font-size: 12px;
    justify-content: space-between;
    align-items: center;
    background-color: #f7f4f5;
  }
}
</style>
